<template>
  <div>
    <mt-popup v-model="popupVisible" position="right" :modal="false" style="width:100%;height:100%">
      <div v-if="config.marketActivityType!=2">
      <mt-datetime-picker
        ref="startPicker"
        type="date"
        v-model="startDate"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        confirmText="下一步" 
        :startDate="new Date()"
        @confirm="$refs.endPicker.open()"
        @cancel="handleCancel"
      ></mt-datetime-picker>
      <mt-datetime-picker
        ref="endPicker"
        type="date"
        v-model="endDate"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        :startDate="moment(startDate).toDate()"
        @confirm="dateChoice"
        @cancel="handleCancel"
      ></mt-datetime-picker>
      </div>
      <div v-else>
      <mt-datetime-picker
        ref="startPicker"
        type="date"
        v-model="startDate"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        confirmText="下一步" 
        :startDate="new Date()"
        :endDate="moment().add(364, 'day').toDate()"
        @confirm="$refs.endPicker.open()"
        @cancel="handleCancel"
      ></mt-datetime-picker>
      <mt-datetime-picker
        ref="endPicker"
        type="date"
        v-model="endDate"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        :startDate="moment(startDate).toDate()"
        :endDate="endTime"
        @confirm="dateChoice"
        @cancel="handleCancel"
      ></mt-datetime-picker>
      </div>
		  <mt-actionsheet :actions="actions" v-model="actionVisible"></mt-actionsheet>
      <customHeader middleTitle="高级设置" @leftCallBack="back" :jsBridgeBack="false"/>
			<div class="scroll-view">
				<div class="page-body">
					<div class="form-title">活动设置</div>
					<ul class="form-style">
            <li @click="$refs.startPicker.open()" v-if="config.marketActivityType==2">
							<span>活动时间</span>
							<div v-if="mstartDate">{{moment(mstartDate).format('YYYY-MM-DD')+'至'+moment(mendDate).format('YYYY-MM-DD')}}<i class="zhk-list_rarrow"></i></div>
						</li>
						<li @click="handleShowAction" v-else>
							<span>活动时间</span>
							<div>{{activityTypeDesc}}<i class="zhk-list_rarrow"></i></div>
						</li>
            <li @click="handleShowAction(false)">
							<span>发放数量</span>
							<div>{{inventory==-1?'不限制':'限制'}}<i class="zhk-list_rarrow"></i></div>
						</li>
            <li v-show="inventory!=-1">
							<span></span>
							<div><inputClear warpClass="t-r" placeholder="请填写发放数量" v-model="inventory" :limitVal="limitFunc"/>张</div>
						</li>
					</ul>
				</div>
				<div class="btn-wrap">
					<mt-button style="width:100%" type="primary" @click="sure">保存</mt-button>
				</div>
			</div>
    </mt-popup>
  </div>
</template>

<script>
import moment from "moment";
import {DatetimePicker, Popup, Toast} from "mint-ui";
import customHeader from "@/components/header/header";
import inputClear from "@/components/inputClear/inputClear";

export default {
	components: {
    customHeader,
    inputClear
  },
  props: ['config'],
  data() {
    return {
      moment: moment,
			popupVisible: false,
			actions: [],
      actionVisible: false,
      activityType: 1,  //长期有效
      startDate: new Date(),
      endDate: new Date(),
      inventory: -1,
      mstartDate: '',
      mendDate: ''
    };
  },
  computed: {
    activityTypeDesc() { 
      let res = '立即开始，长期有效';
      if(!this.activityType) {
        res = `${moment(this.startDate).format('YYYY-MM-DD')} 至 ${moment(this.endDate).format('YYYY-MM-DD')}`
      }
      return res;
    },
    effectStoreDesc() {
      return this.getStoreName('effectStore')
    },
    provideStoreDesc() {
      return this.getStoreName('provideStore')
    },
    endTime() {
      let time = Math.min(moment(+this.startDate).add(89, 'day').endOf('day').valueOf(), moment().add(364, 'day').endOf('day').valueOf());
      return moment(time).toDate();
    }
  },
  methods: {
		popupShow() {
      this.activityType = this.config.activityType;
      this.inventory = this.config.inventory;
      if(!this.config.activityType) {
        this.startDate = this.mstartDate = moment(+this.config.activityStartTime).toDate();
        this.endDate = this.mendDate = moment(+this.config.activityEndTime).toDate();
      }
      this.popupVisible = true;
		},
    back() {
      this.popupVisible = false;
    },
    handleShowAction(flag) {
      const actions1 = [{
				name: '立即开始 长期有效',
        method: () => {
					this.activityType = 1;
				}
			}, {
				name: '自定义日期',
        method: () => {
					this.$refs.startPicker.open();
				}
      }];
      const actions2 =  [{
				name: '不限制',
        method: () => {
          this.inventory = -1;
				}
			}, {
				name: '限制',
        method: () => {
          this.inventory = '';
				}
      }];
      this.actions = flag ? actions1 : actions2;
      this.actionVisible = true;
    },
    limitFunc(v) {
      let val = v.replace(/[^\d]/g,'').replace(/^0(\d*)/,'$1');
      if(val>999999999) val = 999999999;
      return val;
		},
    dateChoice(e) {
      this.activityType = 0;
      this.mstartDate = this.startDate;
      this.mendDate = this.endDate;
    },
    handleCancel() {
      this.startDate = this.endDate = new Date();
    },
    sure() {
      if(this.inventory=='') {
        Toast('请填写发放数量');
        return;
      }
      let params = {
        activityType: this.activityType,
        activityStartTime: moment(+this.startDate).startOf('day').valueOf(),
        activityEndTime: moment(+this.endDate).endOf('day').valueOf(),
        inventory: +this.inventory
      };
      if(this.activityType) {
        params.activityStartTime = Date.now();
        params.activityEndTime = moment(params.activityStartTime).add(20, 'years').valueOf();
      }
      this.popupVisible = false;
      this.$emit('consume', params);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/public";
.form-title {
	background-color: #F9F9F9;
}
.btn-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	box-sizing: border-box;
	padding: 0;
}
</style>
<style lang="scss">
.t-r {
	text-align: right!important;
}
</style>